<template>
  <div class="container">
    <div class="login-container">
      <div class="input-cell">
        <input
          v-model="mobile"
          class="login-input"
          placeholder="请输入手机号"
          type="number"
        />
        <div class="login-icon">
          <img src="@/assets/登录-assets/telephone.png" alt="" />
        </div>
      </div>
      <div class="input-cell">
        <input
          v-model="captcha"
          class="login-input"
          placeholder="请输入验证码"
          type="number"
        />
        <button
          @click="getCaptcha"
          :class="{ 'captcha-btn': true, disabled: captchaStatus }"
          :disabled="captchaStatus"
        >
          <span v-if="!captchaStatus">获取验证码</span>
          <yd-countdown
            v-else
            time="59"
            format="{%s}"
            timetype="second"
            :callback="
              () => {
                captchaStatus = false;
              }
            "
          ></yd-countdown>
        </button>
        <div class="login-icon">
          <img src="@/assets/登录-手机验证码-assets/captcha.png" alt="" />
        </div>
      </div>
      <div class="input-cell">
        <input
          v-model="psw1"
          class="login-input"
          placeholder="请输入密码"
          type="password"
        />
        <div class="login-icon">
          <img src="@/assets/登录-assets/password.png" alt="" />
        </div>
      </div>
      <div class="input-cell">
        <input
          v-model="psw2"
          class="login-input"
          placeholder="请确认密码"
          type="password"
        />
        <div class="login-icon">
          <img src="@/assets/登录-assets/password.png" alt="" />
        </div>
      </div>
      <button @click="reset" class="main-btn" :style="{background: mainColor}">确 定</button>
    </div>
  </div>
</template>

<script>
import { getCaptcha, resetPsw } from "@/api/login";
import "./login-style.less";
import { mapState } from 'vuex'
export default {
  data() {
    return {
      mobile: null,
      captcha: null,
      psw1: null,
      psw2: null,
      captchaStatus: false
    };
  },
  computed: {
    ...mapState({
      mainColor: state => state.app.mainColor,
      subColor: state => state.app.subColor
    })
  },
  methods: {
    getCaptcha() {
      if (!this.mobile) {
        this.$dialog.toast({
          mes: "请填写手机号",
          timeout: 1500,
          icon: "error"
        });
      } else {
        getCaptcha(this.mobile).then(res => {
          if (res.status === 200) {
            this.captchaStatus = true;
          }
        });
      }
    },
    reset() {
      if (!this.mobile) {
        this.$dialog.toast({
          mes: "请填写手机号",
          timeout: 1500,
          icon: "error"
        });
      } else if (!this.captcha) {
        this.$dialog.toast({
          mes: "请填验证码",
          timeout: 1500,
          icon: "error"
        });
      } else if (!this.psw1) {
        this.$dialog.toast({
          mes: "请输入密码",
          timeout: 1500,
          icon: "error"
        });
      } else if (!this.psw2) {
        this.$dialog.toast({
          mes: "请确认密码",
          timeout: 1500,
          icon: "error"
        });
      } else if (this.psw1 !== this.psw2) {
        this.$dialog.toast({
          mes: "两次密码不一致",
          timeout: 1500,
          icon: "error"
        });
      } else {
        resetPsw({
          username: this.mobile,
          password: this.psw2,
          captcha: this.captcha
        }).then(res => {
          if (res.status === 200) {
            this.$dialog.toast({
              mes: "修改成功！",
              timeout: 1500,
              callback: () => {
                this.$router.go(-1);
              }
            });
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  .login-container {
    margin-top: 0.48rem;
    padding: 0;
    background: #fff;
    height: 100%;

    .login-input {
      height: 2rem;
      margin-top: 0;
      padding-left: 1.8rem;
    }

    .login-icon {
      top: 0;
      left: 0.25rem;
      width: 1rem;
      height: 2rem;
      line-height: 2rem;
      text-align: center;

      img {
        height: 0.8rem;
      }
    }

    .main-btn {
      margin-top: 1.8rem;
      border-radius: 0;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    .captcha-btn {
      top: 0.5rem;
      right: 1.1rem;
    }
  }
}
</style>
